By _michel_ on

Hi.

How can I include a .js and a .css files in just one page; not the complete site.

Thanks in advance.

Michel.

⋅ Categories: Drupal 5.x

Comments

Chill35’s picture

Chill35 commented

For the .js, you paste a drupal_add_js call somewhere in the content of the page. Can be in a block. I have tried this and it works : I put that call in a node content, because that particular node needed that .js file, and of course the input format was set to php.

For the .css you paste a drupal_add_css call somewhere in the content of the page. Can be in a block too I think. I never tried it. I should work theoretically. Don't know if that'll work if you preprocess your CSS files (you can set that on your admin 'performance' page).

I guess you could always modify your page.tpl.php template, and, using php, conveniently check drupal's internal path and link in the css file if that's the path thank you very much.

Caroline
Who am I | Where are we
11 heavens

_michel_’s picture

_michel_ commented

Hi,

It works fine :

drupal_add_css ('myfile.css');
drupal_add_js('myfile.js');

Thanks again. Merci.

Michel.

kent007’s picture

kent007 commented

Thanks everyone for helping me solve a similar problem. I too was trying to add a java script to only one page. I first added it to the page template file but the script caused conflicts with the page editor and it's expandable menus. I then simply added it to the page on which it was needed and it worked fine!

I was installing a third party 'contact us' captcha script and your comments helped to get it working.

Cheers,
Kent
http://www.clickbankaccountpro.com

vitalsols’s picture

vitalsols commented

i also want to inclide js file in my template ...how can i incude that

i tried this

drupal_add_js('myfile.js');

but not working

my js file is in template folder.

please help

bharanikumariyerphp’s picture

bharanikumariyerphp commented

working fine for me,

just put like

drupal_add_css("module/custommodulename/file.css");

see view source

jaxxed’s picture

jaxxed commented

Be careful of hardcoding your module paths.

The drupal_add_css (and the js one too) functions take paths relative the the base path (base_path()). Modules can be in various locations, like sites/all/modules/{module} or sites/{mysite}/modules/{module}. The drupal_get_path() function should be used to find the path to an enabled theme or module.

Try this instead:

<?php
drupal_add_css( drupal_get_path('module','{mymodule}') . '/{mycssfile}.css' );
drupal_add_css( drupal_get_path('theme','{mytheme}') . '/{mycssfile}.css' );
?>

This will handle global , custom, and core modules|themes, and will also still work if a module is moved, (like taken from 3rd party to custom state, when moved from sites/all to sites/{mysite}.)

For DRP6 and on: Note also that including css files for themes is easier to do by including a reference to the css in the theme.info file. theme.info declarations are preferred unless the css file is not often included and large.

tinem’s picture

tinem commented

I'm still confused about how to use javascript and css for just ONE page. I still can't figure out how to make a module for just ONE page - can it really be true that I need to do this and if yes can someone help me please?

jaxxed’s picture

jaxxed commented

This is a late reply, so I guess that it doesn't work for you, but in case others see it and feel the same way:

The problem is that there is not a single source for what 'one page' is, so there are different ways to repond depending on what created the page:

  • page type node -> view : if your page is php type (enable php format in modules list) then you can simply put the php tag in there;
  • view page display: you could modify the views tpl (see the theme: information settings on the page, you will likely want to create the template if it doesn't already exist.)
  • custom module page: you could modify the module itself, and insert the js add to the code. This ain't too pretty, but isn't a big deal if it's your module.

It is generally considered a better approach to target elements on you page with a more precise selector, than to modify any core code.

egrotke’s picture

egrotke commented

You can just use something like this in template.php:

function mytheme_preprocess_page(&$vars, $hook) {
if('specific_pathname' === arg(0)) {
$jspath = path_to_theme().'/js/myjavascript.js';
drupal_add_js($jspath);
}

tahiche’s picture

tahiche commented

This might be simpler:

drupal_add_css( (path_to_theme() . /{mycssfile}.css'), 'theme', 'all');

tinem’s picture

tinem commented

I ended up doing it like explained here http://groups.drupal.org/node/79804 making a googlemap.module and people can just copy and paste the code for their own purpose. Which I could make it a "real" module but still need to understand a lot and no one have offerede to help me further. :-(

winklet’s picture

winklet commented

Could someone tell me exactly on which file or where I need to add a line of code like this to include a css file?

drupal_add_css( (path_to_theme() . /{mycssfile}.css'), 'theme', 'all');

Where does this go? I need it to be included on a newsletter email template. I tried putting it on the template itself but it doesn't work.